<template>
    <div class="headBox headBox_an">
        <div class="headwrap">
            <div class="head">
                <div class="ul_box">
                    <ul class="nav">
                        <li class="msite_title msite_title_index">
                            <router-link to="/Home" slot="msite-title">
                                <div>Datapoint
                                    <!-- <i class="iconfont icon-lengyun "></i> -->
                                </div>
                            </router-link>
                        </li>
                        <li class="msite_title">
                            <router-link to="/StorageProduct">
                                <div>冷链仓储</div>
                            </router-link>
                        </li>
                        <li class="msite_title">
                            <router-link to="/TransportProduct">
                                <div>冷链运输</div>
                            </router-link>
                        </li>
                        <li class="msite_title">
                            <router-link to="/BoxProduct">
                                <div>冷链包装</div>
                            </router-link>
                        </li>
                        <li class="msite_title">
                            <router-link to="/Distribution">
                                <div>冷云平台</div>
                            </router-link>
                        </li>
                        <li class="msite_title">
                            <router-link to="/Verification">
                                <div>冷链验证</div>
                            </router-link>
                        </li>
                        <li class="msite_title">
                            <router-link to="/Support">
                                <div>技术支持</div>
                            </router-link>
                        </li>
                        <!-- <li class="msite_title_car">
                            <router-link to="/MyCart" slot="msite-title">
                                <div>
                                    <i class="iconfont icon-daohanggouwuche"></i>
                                </div>
                            </router-link>
                        </li> -->

                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
export default {
  name: "Nav",
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.headBox_an {
  position: relative;
  width: 100%;
}
.headwrap {
  width: 100%;
  background: #111;
  height: 55px;
  position: relative;
  transition: all 0.6s 0.8s;
  -webkit-transition: all 0.6s 0.8s;
  z-index: 2;
  .head {
    padding-right: 60px;
    margin: 0 auto;
    top: -300px;
    transition: all 0.6s;
    position: relative;
    -webkit-transition: all 0.6s;
    .ul_box {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 20px;
    }
    .nav {
      overflow: hidden;
      margin-right: 0;
      line-height: 55px;
      .last {
        margin-right: 0;
        float: right;
      }
      a {
        position: relative;
        height: 55px;
        line-height: 55px;
        display: block;
        text-decoration: none;
        text-align: center;
      }
    }
    .msite_title {
      float: left;
      width: 14.28%;
    }
    .msite_title_index {
        font-style: italic;
    }
    .msite_title_car {
      width: 5em;
      float: right;
    }
    .msite_title:hover > a,
    .router-link-active {
      opacity: .65;
      color:#fff;
    }
  }
}
.headBox_an {
  .head {
    transition: all 1s;
    -webkit-transition: all 1s;
    top: 0;
  }
}
.headBox_an:hover {
  .headwrap {
    background: #000;
    transition: all 0.6s;
    -webkit-transition: all 0.6s;
  }
}
</style>